<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>湖外湖点餐系统</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <meta name="description" content="Portfolio Zoom Slider with jQuery" />

        <meta name="keywords" content="jquery, plugin, slider, zoom, portfolio, cloud-zoom"/>

		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>

        <link rel="stylesheet" type="text/css" href="css/style.css" />

		<link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css" />

		<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />

		<script src="js/cufon-yui.js" type="text/javascript"></script>

		<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
		
 <style type="text/css">
    body{
		 
		margin: 0px;
		padding: 0px;
		font-size: 12px;
		font-family: Arial;
	 
      }
	  #container{
		width: 1368px;
		background: #f2f2f2;
		text-align: left;
		margin: 0px auto;

	  }
	  #hyh-bestup{
		  margin: 0px;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #444444;
	  }
	  #hyh-bestup-down1{
		  margin: 0px ;
		  padding: 0px;
		  width:1368px;
		  height:42px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down2{
		  margin:0px;
		  padding:0px;
		  height:42px;
		  line-height:42px;
	  }
	  #hyh-bestup-down3{
		  margin: 5px 90px 5px 0px ;
		  padding: 0px;
		  width:180px;
		  height:37px;
		  background: #020202;
		  clear:both;
		  float:left;
	  }
	  #hyh-bestup-down1 li,#hyh-bestup-down1 li a{
		  float:left;
		  line-height: 42px;
		  display: block;
		  text-align:center;
		  width:100px;
		  margin-left:140px;
		  padding:0px;
		  font-size:14px;
		  list-style-type: none;
		  text-decoration:none;
		  color:#FFF;
	  }
	  #hyh-bestup-down1 ul li a:hover{
		  color:#a6a6a6;
		  text-decoration:blink;
	  }
	  
	  #clear{
		  width:1368px;
		  height:0px;
		  clear:both;
	  }
	  #footer_line{
		  width:1268px;
		  border: 1px solid #b2b2b2;
		  margin:20px 100px 2px 100px;
		  padding:0px;
		  float:left;
		  clear:both;
	  }
	  #footer{
		  width:1368px;
		  height:12px;
		  margin:5px 100px;
		  float: left;
		  clear: both;
	  }
	  #footer_left{
		  width:230px;
		  height:12px;
		  margin:0px;
		  padding:3px;
		  float:left;
		  clear:both;
	  }
	  #footer_right{
		  width:800px;
		  height:14px;
		  margin:0px;
		  padding:0px;
		  float:left;
	  }
 </style> 


		<script type="text/javascript">

			Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});

			

			Cufon.replace('.footer');

		</script>

    </head>

    <body>
    <div id="container">
	<div id="hyh-bestup">
    </div>
    <div id="hyh-bestup-down1">
	<ul>
		<div id="hyh-bestup-down3">
		<li><a href="own.html"><img src="images/hyh_text.png"></a></li>
		</div>
        <div id="hyh-bestup-down2">
		<li><a href="everybody.html">大众登录</a></li>
		<li><a href="#">VIP登录</a></li>
		<li><a href="#">关于我们</a></li>
        </div>
	</ul>
    </div>
   
    


		<div class="wrapper">

		    <div id="content" class="content">

				<div class="item">

					<div class="thumb_wrapper">

						<div class="thumb">

							<ul>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/maoxuewang.png"><img src="images/thumbs/maoxuewang.png" alt="Formstack 1"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/maoxuewang.png"><img src="images/thumbs/maoxuewang.png" alt="Formstack 2"/></a></li>

								<li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="images/maoxuewang.png"><img src="images/thumbs/maoxuewang.png" alt="Formstack 3"/></a></li>

							</ul>

						</div>

						<a class="prev" href="#"></a>

						<a class="next" href="#"></a>

						

					</div>

					<div class="description">

						<h2 >重庆毛血旺</h2>

						<p>重庆毛血旺属于川菜，主要原料是鸭肉、猪心、猪肚，口味是麻辣，工艺是炒，难度属于中级。特色：麻、辣、烫、鲜、香。
                        </p>

                       


					</div>

				</div>
			</div>	

        </div>
				
				

				



				

		

		



		<!-- The JavaScript -->

		<script src="http://www.jq22.com/jquery/jquery-1.6.2.js"></script>

		<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

		<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>

		<script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>

		<script type="text/javascript">

			$(function() {

				/*

				fancybox init on each cloud-zoom element

				 */

				$("#content .cloud-zoom").fancybox({

					'transitionIn'	:	'elastic',

					'transitionOut'	:	'none',

					'speedIn'		:	600,

					'speedOut'		:	200,

					'overlayShow'	:	true,

					'overlayColor'	:	'#000',

					'cyclic'		:	true,

					'easingIn'		:	'easeInOutExpo'

				});



				/*

				because the cloud zoom plugin draws a mousetrap

				div on top of the image, the fancybox click needs

				to be changed. What we do here is to trigger the click

				the fancybox expects, when we click the mousetrap div.

				We know the mousetrap div is inserted after

				the <a> we want to click:

				 */

				$("#content .mousetrap").live('click',function(){

					$(this).prev().trigger('click');

				});



				/*

				the content element;

				each list item / group with several images

				 */

				var $content	= $('#content'),

				$thumb_list = $content.find('.thumb > ul');

				/*

				we need to set the width of each ul (sum of the children width);

				we are also defining the click events on the right and left arrows

				of each item.

				 */

				$thumb_list.each(function(){

					var $this_list	= $(this),

					total_w		= 0,

					loaded		= 0,

					//preload all the images first

					$images		= $this_list.find('img'),

					total_images= $images.length;

					$images.each(function(){

						var $img	= $(this);

						$('<img/>').load(function(){

							++loaded;

							if (loaded == total_images){

								$this_list.data('current',0).children().each(function(){

									total_w	+= $(this).width();

								});

								$this_list.css('width', total_w + 'px');



								//next / prev events



								$this_list.parent()

								.siblings('.next')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == $this_list.children().length -1) return false;

									var	next	= ++current,

									ml		= -next * $this_list.children(':first').width();



									$this_list.data('current',next)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								})

								.end()

								.siblings('.prev')

								.bind('click',function(e){

									var current = $this_list.data('current');

									if(current == 0) return false;

									var	prev	= --current,

									ml		= -prev * $this_list.children(':first').width();



									$this_list.data('current',prev)

									.stop()

									.animate({

										'marginLeft'	: ml + 'px'

									},400);

									e.preventDefault();

								});

							}

						}).attr('src',$img.attr('src'));

					});

				});

			});

        </script>

    </body>

</html>